<template>
  <div>
      <div class="card file" v-bind:class="file.selected ? 'selected-file-shadow' : ''" v-for="(file, index) in files">
          <div @click="$emit('file-click', index)" :title="file.type == 'DIR' && file.empty ? '空目录' : ''">
              <span class="float-top album" v-if="file.type == 'ALBUM'">
                <span>
                  <img src="../../static/img/album.svg" alt="" width="9" height="10">
                </span>
                <span style="margin-left: -2px;">{{file.containNum}}</span>
              </span>
              <div class="float-top file-ops-box">
                <span v-if="!isCurrentPathRoot && file.type != 'OTHER' && (file.type == 'DIR' ? file.containsImage : true)" class="file-ops" @click="$emit('filing', index)" title="编辑">
                  <img src="../../static/img/pencil-square.svg" alt="">
                </span>
                <span v-if="file.type != 'DIR' && file.type != 'OTHER'" class="file-ops" @click.stop="displayImg(file)" title="查看">
                  <img src="../../static/img/eye-fill.svg" alt="">
                </span>
                <span v-if="file.type == 'DIR'" class="file-ops" @click.stop="$emit('enter', file.filename)" title="进入目录">
                  <img src="../../static/img/box-arrow-in-right.svg" alt="">
                </span>
              </div>
              <div>
                <img v-if="file.type == 'DIR'" class="card-img-top file-icon" v-bind:src="'../../static/img/dir.svg'" v-bind:alt="file.filename">
                <img v-else-if="file.type == 'OTHER'" class="card-img-top file-icon" v-bind:src="'../../static/img/file-earmark-fill.svg'" v-bind:alt="file.filename">
                <img v-else class="card-img-top width-img file-icon" v-bind:src="file.iconUrl" v-bind:alt="file.filename">
              </div>
          </div>
          <div class="card-body" style="padding: 5px 1px 0 0">
              <p class="card-text filename" v-bind:title="file.filename">{{file.filename}}</p>
          </div>

      </div>
  </div>
</template>

<script>
  export default {
    name: 'FileList',
    props: ['files', 'isCurrentPathRoot'],
    methods: {
      /**
       * 打开新窗口展示图片
       * */
      displayImg(file) {
        switch (file.type) {
          case 'IMAGE':
          case 'PIC':
            window.open(file.iconUrl, '_blank');
            return;
          case 'ALBUM':
            let url = location.origin + '/#' + '/display';
            let param = 'id=' + file.id;
            window.open(url + '?' + param, '_blank');
            return;

        }
      },
    }
  }
</script>

<style>
  .file {
      display: inline-block;
      width: 220px;
      border: none;
      margin-top: 25px;
      margin-right: 40px;
      padding: 5px;
      background-color: inherit;
  }
  .width-img {
      height: 100%;
      object-fit: cover;
      object-position: center center;
  }
  .file-icon {
      display: block;
      margin: 0 auto;
      height: 200px;
      border-radius: 10px;
      cursor: pointer;
  }

  .filename {
      font-size: 14px;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .selected-file-shadow {
      box-shadow: 4px 4px 4px #7e8c8d;
  }
  .float-top {
    position: absolute;
    z-index: 1000;
  }
  .album {
    color: white;
    right: 10px; top: 10px;
    font-size: 10px;
    font-weight: bold;
    padding: 0px 6px;
    background-color: rgba(124, 145, 140, 0.5);
    border-radius: 10px;
  }
  .file-ops-box {
    width: 16px;
    right: 10px; bottom: 30px;
    border-radius: 10px;
  }
  .file-ops {
    cursor: pointer;
  }
  .file-ops-box:hover {
    background-color: rgba(255, 255, 255, 0.8);
  }

</style>
